<template>
  <div id="return_point_auditGood">
    <c-title :hide="false" :text="plugin_name"></c-title>
    <van-search v-model="keyword" shape="round" placeholder="请输入商品名称" @search="onSearch" />
    <van-tabs v-model="active" line-width="20" title-active-color="#F15353" @change="onSearch">
      <van-tab title="全部" name="null"></van-tab>
      <van-tab title="待审核" name="0"></van-tab>
      <van-tab title="已通过" name="1"></van-tab>
      <van-tab title="驳回" name="2"></van-tab>
      <van-tab title="撤回" name="3"></van-tab>
    </van-tabs>
    <div class="list" v-for="item in list" :key="item.id">
      <div class="list_top">
        <div class="list_time">{{ item.time }}</div>
        <div class="statusBox">{{ item.status_name }}</div>
      </div>
      <div class="goodDetail">
        <img :src="item.thumb" class="goodDetail_img" alt="" />
        <div class="goodDetail_r">
          <div class="goodDetail_r_title">{{ item.title }}</div>
          <div class="goodDetail_r_b">
            <div class="goodDetail_r_b_price">¥ {{ item.price }}</div>
          </div>
        </div>
      </div>
      <div class="lis_tag">
        <div class="lis_tag_txt">{{ item.activity_name }}</div>
        <div class="lis_tag_txt">{{ item.category_name }}</div>
      </div>
      <div class="btnBox" v-if="item.status_name == '待审核' || item.status_name == '驳回' || item.status_name == '撤回'">
        <div class="btn" v-if="item.status_name == '待审核'" @click="btnPostMethod(1, item.id)">撤回</div>
        <div class="btn" v-if="item.status_name == '驳回' || item.status_name == '撤回'" @click="btnPostMethod(2, item.id)">重新提交</div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      active: null,
      keyword: "",
      list: [],
      plugin_name: "",
      page: 1,
      isLoadMore: true, //判断是否要加载更多的标志
      total_page: 1
    };
  },
  activated() {
    this.init();
    this.getData();
    let basic_info = window.localStorage.getItem("yz_basic_info");
    let plugin_setting = JSON.parse(basic_info).plugin_setting;
    this.plugin_name = plugin_setting.return_point.plugin_name;
    this.fun.setWXTitle(this.plugin_name);
  },
  methods: {
    btnPostMethod(key, id) {
      if (key == 1) {
        this.$dialog
          .confirm({
            title: "",
            message: "是否撤回商品"
          })
          .then(() => {
            this.btnPost(key, id);
          });
        return;
      } else {
        this.btnPost(key, id);
      }
    },
    async btnPost(key, id) {
      let urlStr = "plugin.return-point.frontend.supplier.goods-check.op";
      if (this.$route.query.storeTag == 1) {
        urlStr = "plugin.return-point.frontend.store.goods-check.op";
      }
      let { data, msg, result } = await $http.post(
        urlStr,
        {
          op: key,
          id: id
        },
        "."
      );
      if (result) {
        this.$toast(msg);
        this.init();
        this.getData();
      } else {
        this.$toast(msg);
      }
    },
    async onSearch() {
      this.init();
      this.getData();
    },
    init() {
      this.page = 1;
      this.total_page = 1;
      this.list = [];
    },
    async getData() {
      let urlStr = "plugin.return-point.frontend.supplier.goods-check.index";
      if (this.$route.query.storeTag == '1') {
        urlStr = "plugin.return-point.frontend.store.goods-check.index";
      }
      let { data, msg, result } = await $http.post(
        urlStr,
        {
          keyword: this.keyword,
          status: this.active == "null" ? null : this.active
        },
        "."
      );
      if (result) {
        this.list = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        let urlStr = "plugin.return-point.frontend.supplier.goods-check.index";
        if (this.$route.name == "return_point_auditGood") {
          urlStr = "plugin.return-point.frontend.store.goods-check.index";
        }
        this.page = this.page + 1;
        let json = {
          page: this.page,
          keyword: this.keyword,
          status: this.active == "null" ? null : this.active
        };
        let { data, msg, result } = await $http.post(urlStr, json, ".");
        this.isLoadMore = true;
        if (result) {
          this.list = this.list.concat(data.data);
        } else {
          this.page = this.page - 1;
          this.$toast(msg);
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#return_point_auditGood {
  padding-bottom: 2rem;
  .list {
    margin: 0 0.75rem;
    margin-top: 0.63rem;
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0.94rem 0.75rem;
    text-align: left;
    .btnBox {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 0.94rem;
      .btn {
        background: #f15353;
        border-radius: 1.88rem;
        font-size: 0.81rem;
        color: #ffffff;
        line-height: 1;
        padding: 0.56rem 1.59rem;
        box-sizing: border-box;
      }
    }
    .lis_tag {
      display: flex;
      flex-wrap: wrap;
      font-size: 0.75rem;
      line-height: 1;
      margin-top: 0.63rem;
      .lis_tag_txt {
        padding: 0.37rem 0.53rem;
        box-sizing: border-box;
        background: #f5f5f5;
        border-radius: 0.38rem;
        margin-right: 0.5rem;
      }
    }
    .list_top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 1rem;
      .list_time {
        font-weight: 500;
        font-size: 0.88rem;
        line-height: 1;
      }
      .statusBox {
        font-size: 0.88rem;
        color: #f15353;
        line-height: 1;
      }
    }

    .goodDetail {
      display: flex;
      .goodDetail_img {
        flex-shrink: 0;
        margin: 0;
        margin-right: 0.53rem;
        background: #d6d6dc;
        border-radius: 0.63rem;
        width: 5.38rem;
        height: 5.38rem;
      }
      .goodDetail_r {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .goodDetail_r_title {
          font-weight: 500;
          font-size: 0.88rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .goodDetail_r_b {
          display: flex;
          flex-direction: column;
          .goodDetail_r_b_price {
            font-weight: bold;
            font-size: 0.88rem;
            color: #f15353;
          }
          .goodDetail_r_b_sku {
            font-size: 0.81rem;
            color: #00001c;
            .sku:first-child {
              margin-right: 0.97rem;
            }
          }
        }
      }
    }
  }
}
</style>
